<template>
  <div class="id">
    <header>
      <a href="javascript:;" @click="sy">
        <img src="./7.png" alt="" />
      </a>
      <a href="javascript:;">{{ arr.name }}</a>
      <a href="javascript:;" @click="sy">切换城市</a>
    </header>
    <main>
      <form>
        <input
          v-model="model"
          type="text"
          placeholder="输入学校、商务楼、地址"
        />
        <button @click="old">提交</button>
      </form>
      <ul class="ul" v-show="show">
        <li v-for="(i, index) in arr1" :key="index" @click="clk(i)">
          <h4>{{ i.name }}</h4>
          <p>{{ i.address }}</p>
        </li>
      </ul>
      <nav>搜索历史</nav>
      <ul>
        <li v-for="(i, index) in $store.state.car.arr" :key="index">
          <h4>{{ i.name }}</h4>
          <p>{{ i.address }}</p>
        </li>
      </ul>
      <footer v-if="$store.state.car.arr.length" @click="qksy">清空所有</footer>
    </main>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      arr: [],
      show: false,
      model: "",
      arr1: [],
    };
  },
  mounted() {
    this.axios
      .get("http://elm.cangdu.org/v1/cities/" + this.$route.query.id)
      .then((res) => {
        this.arr = res.data;
      });
  },
  methods: {
    sy() {
      this.$router.push("/demo");
    },
    old() {
      this.show = true;
      this.axios
        .get(
          "http://elm.cangdu.org/v1/pois?type=search&city_id=" +
            this.$route.query.id +
            "&keyword=" +
            this.model
        )
        .then((res) => {
          this.arr1 = res.data;
        });
    },
    clk(i) {
      this.show = false;
      this.model = "";
      this.$store.commit("lsjl", i);
    },
    qksy() {
      this.$store.commit("qk");
    },
  },
};
</script>
  
  <style  scoped>
#app,
html,
body {
  width: 100%;
  height: 100%;
  background: #f5f5f5 !important;
}
.ul {
  position: absolute;
}
header {
  width: 100%;
  height: 62rem;
  background: #3190e8;
  font-size: 20rem;
  padding: 0 16rem;
  position: fixed;
  top: 0;
  z-index: 100;
  position: relative;
}
header a {
  display: block;
  color: #fff;
  line-height: 62rem;
}
header a:nth-of-type(1) img {
  display: inline-block;
  width: 14rem;
  height: 24rem;
  vertical-align: middle;
}
header a:nth-of-type(3) {
  float: right;
  position: absolute;
  right: 20rem;
  bottom: 0;
}
header a:nth-of-type(2) {
  position: absolute;
  left: 22%;
  top: 0;
  display: inline-block;
  margin-left: 20%;
  color: #fff;
}
main {
  flex: 1;
  background: #f5f5f5;
  position: relative;
}
form {
  height: 140rem;
  background: #fff;
  padding: 13rem 25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
input {
  width: 100%;
  height: 44rem;
  font-size: 20rem;
  padding: 0 14rem;
}
button {
  width: 100%;
  height: 44rem;
  background-color: #3190e8;
  font-size: 20rem;
  color: #fff;
  border: 0px solid #000;
}
nav {
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  padding-left: 15rem;
  height: 28rem;
  line-height: 28rem;
  font-size: 14rem;
}
main ul {
  background: #fff;
  overflow: hidden;
  width: 100%;
}
main footer {
  background: #fff;
  overflow: hidden;
  height: 65rem;
  text-align: center;
  font-size: 22rem;
  line-height: 65rem;
}
main li {
  padding-top: 20rem;
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
}
main h4 {
  margin: 0 26rem 10rem;
  font-size: 20rem;
  width: 100%;
}
main p {
  padding: 0 26rem 10rem;
  font-size: 14rem;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>